<!--Lab2新增-->
<!--商品列表父组件中的单个商品子组件-->
<script setup lang="ts">
import { defineProps } from 'vue'
import {router} from "../router";
import {ref} from 'vue'
import {productInfo} from "../api/product.ts";
import {parseCategory} from "../utils";

const category = ref('')
const name = ref("")
const photoUrl = ref([])
const price = ref()
const score = ref()
const count = ref()
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])
const props = defineProps<{
  id : number,
}>()
getinfo()
function getinfo() {
  productInfo(props.id).then(res => {
    name.value = res.data.result.name
    category.value = res.data.result.category
    photoUrl.value = res.data.result.photoUrl
    score.value = res.data.result.rating
    score.value = Number(score.value.toFixed(1))
    count.value = res.data.result.commentNumber
    price.value = res.data.result.price
  })
}
const toDetails = () => {
  router.push({ name: 'productDetail', params: { productId: props.id } });
}
</script>

<template>
    <el-card  class="product-item" shadow="hover" @click.prevent="toDetails">
      <div class="product-content">
        <div class="product-header">
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="index in photoUrl" :key="index">
              <div class="carousel-item-wrapper">
                <el-image :src="index" fit="cover" class="product-image" width = "300px" height = "300px"></el-image>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="product-info">
          <h1>{{ name }}</h1>
          <p>种类: {{parseCategory(category)}}</p>
          <p>单价: {{price}}元</p>
        </div>
        <el-space direction="vertical">
        <el-rate
            v-model = "score"
            disabled
            show-score
            text-color="#99A9BF"
            score-template="{value}分"
            :colors="colors">
        </el-rate>
        <el-text>已有{{count}}人评分</el-text>
        </el-space>
      </div>
    </el-card>
</template>

<style scoped>


.product-item {
  margin: 8px;
  border-radius: 8px;
  min-width: 31%;
}




.carousel-item-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* Ensure each carousel item occupies the full height */
}

.product-image {
  height: 200px;
}

.product-info h1 {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
}

.product-info p {
  font-size: 14px;
  color: #666;
}
</style>
